<template>
	<!-- <view class="container" :style="{backgroundImage: 'url('+bj+')'}"> -->
	<scroll-view scroll-y="true" class="container">
		<uni-nav-bar :fixed="true" :statusBar="true" backgroundColor="transparent" leftWidth="500rpx" :border="false">
			<template v-slot:left>
				<image @click="$publicFun.goBack()" class="left-img" src="@/static/img/left.png" mode="widthFix">
				</image>
			</template>
		</uni-nav-bar>
		<view class="container-swiper">
			<view class="container-swiper-bj">

			</view>
			<swiper class="swiper" :indicator-dots="indicatorDots" :circular="circular" :vertical="vertical"
				:autoplay="autoplay" indicator-active-color="#ffffff" indicator-color='rgba(238,238,238,1)'
				:interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in concertDetail.pictures" :key="index">
					<image class="product-image-box-img" :src="host+item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="container-box">
			<view class="container-head">
				<!-- 演唱会图片 -->
				<image :src="host+concertDetail.icon" mode="aspectFill" class="concert-image"></image>
				<view class="container-head-r">
					<!-- 演唱会标题 -->
					<view class="concert-title">{{ concertDetail.name }}</view>
					<view class="concert-txt">
						{{ concertDetail.tags?concertDetail.tags.join(' '):' ' }}
					</view>
					<!-- <view class="concert-btn">
						+ 关注
					</view> -->
				</view>
			</view>

			<!-- 巡演计划路线图 -->
			<view class="tour-plan">
				<view class="timeline">
					<view v-for="(plan, index) in concertDetail.goodsList" :key="index" class="plan-item"
						@click="goPage('/page_home/planDetail?id='+plan.id)">
						<view class="timeline-dot" v-if="index%2==0"></view>
						<view class="plan-title">
							<view class="plan-city">{{ plan.name }}</view>
							<view class="plan-price">￥<text
									class="plan-price-text">{{ plan.currentLowestUnitPrice/100 }}</text>起</view>
						</view>
						<view class="plan-time">{{ $publicFun.GetTime(plan.validTimeStart).slice(0,10)  }}</view>
						<view class="plan-addr">{{plan.region}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="topClass">
				<view class="topClassTxt">
					<text class="topClassTxt-l-circle"></text>
					<text class="topClassTxt-l">2025 </text>
					<text class="topClassTxt-r">最新演出</text>
				</view>
				<view v-for="(plan, index) in concertDetail.goodsList" :key="index" class="serviceClass"
					@click="goPage('/page_home/planDetail?id='+plan.id)">
					<view class="serviceClassview">
						<view class="serviceClassviewl">
							{{ plan.name }}
						</view>
						<view class="serviceClassviewr">
							<text class="serviceClassviewrl">￥{{plan.currentLowestUnitPrice}}</text>
							<text class="serviceClassviewrr">起</text>
						</view>
						<view class="serviceClassviewb">
							{{ $publicFun.GetTime(plan.validTimeStart).slice(5,10)  }}-{{ $publicFun.GetTime(plan.validTimeEnd).slice(5,10)  }}
						</view>
					</view>
				</view>
			</view> -->
			<view class="detail">
				<view class="detail-title">
					演出介绍
				</view>
				<view class="detail-box">
					<view class="" v-html="concertDetail.description">
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				// 演唱会详情数据
				concertDetail: {},
				// 主图 轮播
				indicatorDots: false,
				autoplay: true,
				vertical: false,
				interval: 5000,
				duration: 1000,
				circular: true,
				// bj: require('@/static/img/plan-bg.jpg'),
				// concertDetail: {
				// 	image: require('@/static/img/zjl.jpg'), // 演唱会图片URL
				// 	title: '2023年全球巡演 - 城市之声', // 演唱会标题
				// 	tourPlans: [{
				// 			city: '北京',
				// 			time: '2023-10-01 19:00',
				// 			price: '299'
				// 		},
				// 		{
				// 			city: '上海',
				// 			time: '2023-10-05 20:00',
				// 			price: '399'
				// 		},
				// 		{
				// 			city: '广州',
				// 			time: '2023-10-10 18:30',
				// 			price: '349'
				// 		},
				// 		{
				// 			city: '深圳',
				// 			time: '2023-10-15 19:30',
				// 			price: '399'
				// 		}
				// 	]
				// }
			};
		},
		onLoad(option) {
			this.init(option.id)

			// #ifdef MP-WEIXIN
			// const that = this
			// this.$publicFun.urlTobase64('../static/img/plan-bg.jpg').then((res)=>{
			// 	that.bj = res
			// })
			// #endif	
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			async init(id) {
				let data = await this.$apiFun.getApi(
					this.$api.groupDetailApi, {
						groupId: id
					}
				)

				let imgDom = '<img style="width:100%;height:auto;" mode="widthFix" src="' + this.host + '/'
				data.description = data.description.replace(/<img src="/gi, imgDom)
				this.concertDetail = data
				console.log('data-----------', data)
			},

		}
	};
</script>
<style>
	rich-text{
		color: rgba(255, 255, 255, .7);
	}
	.detail-box uni-view{
		color: rgba(255, 255, 255, .7);
		
	}
</style>
<style scoped lang="less">
	
	page {
		height: 100%;
		// background-attachment: fixed;
		// background-image: url('../static/img/plan-bg.jpg');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		// background-position: top center;
		background: #000000;
	}


	.container {
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		background: #000000;

		.container-box {
			left: 0;
			right: 0;
			position: absolute;
			z-index: 2;
			margin-top: 230rpx;
			padding: 10px;
			box-sizing: border-box;
			height: calc(100vh - 320rpx);

			.topClass {
				width: 100%;
				padding: 0 15rpx;
				box-sizing: border-box;

				.topClassTxt {
					padding: 20rpx 15rpx 5rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #797979;
					display: flex;
					align-items: center;

					.topClassTxt-l-circle {
						width: 15rpx;
						height: 15rpx;
						background-color: #ff4986;
						border-radius: 50%;
						border: 10rpx solid #ffbfcb;

					}

					.topClassTxt-l {
						font-size: 48rpx;
						color: #000000;
						font-weight: bold;
						margin: 0 10rpx;
					}
				}

				.serviceClass {
					box-sizing: border-box;
					display: inline-block;
					width: 33.3%;
					text-align: center;
					padding: 15rpx;

					.serviceClassview {
						border-radius: 7rpx;
						background-color: #fff4f8;
						padding: 25rpx 10rpx;
						width: 100%;
						box-sizing: border-box;

						.serviceClassviewl {
							width: 100%;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-size: 25rpx;
						}

						.serviceClassviewr {
							.serviceClassviewrl {
								color: #f92963;
								font-size: 38rpx;
								margin-right: 2rpx;
							}

							.serviceClassviewrr {
								color: #999999;
								font-size: 24rpx;
							}
						}

						.serviceClassviewb {
							color: #999999;
							font-size: 22rpx;
						}
					}
				}
			}
		}

		.concert-image {
			width: 95rpx;
			height: 95rpx;
			border-radius: 10rpx;
		}

		.container-head {
			display: flex;
			align-items: center;
			height: 130rpx;
		background-color: rgba(0, 0, 0, 0.8);
				color: rgba(255, 255, 255, 1);
		
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.container-head-r {
				height: 95rpx;
				margin: 15rpx 0 0 30rpx;

				.concert-title {
					font-size: 26rpx;
					font-weight: bold;
				color: rgba(255, 255, 255, 1);
				}

				.concert-txt {
					opacity: .6;
					font-size: 22rpx;
					margin-bottom: 20rpx;
				}

				// .concert-btn{
				// 	width:150rpx;
				// 	height:60rpx;
				// 	display:flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	border:2rpx solid #ffffff;
				// 	font-size: 26rpx;
				// 	border-radius:60rpx;
				// }
			}
		}

	}

	.left-img {
		width: 40rpx;
		height: 40rpx;
	}

	.detail {
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 0 30rpx 20rpx 30rpx;
		background-color: rgba(0, 0, 0, 0.6);
		margin-top: 20rpx;

		.detail-title {
				color: rgba(255, 255, 255, 1);
			height: 90rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			line-height: 90rpx;
		}



	}

	.container-swiper {
		position: absolute;
		z-index: 0;
		top: 0;
		right: 0;
		width: 100%;
		height: 400rpx;

		.container-swiper-bj {
			position: absolute;
			width: 100%;
			height: 400rpx;
			top: 0;
			z-index: 1;
			background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .6), rgba(0, 0, 0, .2), rgba(245, 245, 245, .6));
		}

		.swiper {
			width: 100%;
			height: 400rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #a6a4a5;
			line-height: 60rpx;
			overflow: hidden;

			.product-image-box-img {
				width: 100% !important;
				height: 400rpx;
				overflow: hidden;

			}
		}

	}



	.section-title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.plan-item {
		margin-bottom: 30rpx;
		padding: 20rpx;
				background-color: rgba(0, 0, 0, 0.6);
		border-radius: 8rpx;
		position: relative;
	}

	.plan-city {
		font-size: 36rpx;
	}

	.plan-time {
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.plan-addr {
		color: #666;
		margin-top: 10rpx;
		font-size: 28rpx;

	}

	.plan-price {
		font-size: 24rpx;
		color: #e74c3c;
		white-space: nowrap;

		.plan-price-text {
			font-size: 30rpx;
			margin-right: 5rpx;

		}
	}

	.timeline {
		margin-top: 20rpx;
		position: relative;
		padding-left: 40rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 4rpx;
			height: 100%;
			background-color: #e0e0e0;
		}

		.plan-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.plan-item {
			margin-bottom: 30rpx;
			padding: 20rpx;
				background-color: rgba(0, 0, 0, 0.6);
			border-radius: 8rpx;
			position: relative;
			color: rgba(255, 255, 255, 1);
			.plan-city {
				font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
			}
			
			.plan-time {
				font-size: 28rpx;
				margin-top: 10rpx;
			color: rgba(255, 255, 255, .7);
			}
			
			.plan-addr {
			color: rgba(255, 255, 255, .7);
				margin-top: 10rpx;
				font-size: 28rpx;
			
			}
			
			.plan-price {
				font-size: 24rpx;
				color: #e74c3c;
				white-space: nowrap;
			
				.plan-price-text {
					font-size: 30rpx;
					margin-right: 5rpx;
			
				}
			}
		}

		

		.timeline-dot {
			width: 10px;
			height: 10px;
			background-color: #ffffff;
			border-radius: 50%;
			position: absolute;
			left: -48rpx;
			top: 0rpx;
		}
	}
</style>